<!-- IntermediateDataLogViewer.vue -->
<template>
  <div class="log-viewer">
    <div class="panel-header">
      <h2><el-icon><Document /></el-icon> 中间数据日志查看器</h2>
      <div class="log-controls">
        <el-input
            v-model="searchQuery"
            placeholder="搜索日志..."
            size="small"
            clearable
            style="width: 200px"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-select v-model="logLevel" size="small" placeholder="日志级别">
          <el-option label="全部" value="all" />
          <el-option label="错误" value="error" />
          <el-option label="警告" value="warning" />
          <el-option label="信息" value="info" />
        </el-select>
      </div>
    </div>

    <div class="log-stats">
      <div class="stats-card">
        <div class="stats-value">{{ totalLogs }}</div>
        <div class="stats-label">总日志数</div>
      </div>
      <div class="stats-card">
        <div class="stats-value">{{ errorLogs }}</div>
        <div class="stats-label">错误日志</div>
      </div>
      <div class="stats-card">
        <div class="stats-value">{{ warningLogs }}</div>
        <div class="stats-label">警告日志</div>
      </div>
    </div>

    <div class="log-table">
      <el-table :data="filteredLogs" height="50vh" style="width: 100%">
        <el-table-column prop="timestamp" label="时间" width="180" />
        <el-table-column prop="level" label="级别" width="100">
          <template #default="{ row }">
            <el-tag
                :type="row.level === 'ERROR' ? 'danger' : row.level === 'WARN' ? 'warning' : 'info'"
                size="small"
            >
              {{ row.level }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="来源" width="150" />
        <el-table-column prop="message" label="消息" />
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button size="small" @click="showLogDetails(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="log-pagination">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="filteredLogs.length"
          small
          background
          layout="prev, pager, next"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Document, Search } from '@element-plus/icons-vue'
import {ElButton, ElIcon, ElInput, ElOption, ElPagination, ElSelect, ElTable, ElTableColumn, ElTag} from "element-plus";

const searchQuery = ref('')
const logLevel = ref('all')
const currentPage = ref(1)
const pageSize = ref(10)

const totalLogs = ref(346)
const errorLogs = ref(42)
const warningLogs = ref(85)

const logData = ref([
  {
    id: 1,
    timestamp: '2025-08-01 08:12:34',
    level: 'ERROR',
    source: 'MongoDB',
    message: '连接数据库失败: Connection timed out',
    details: '在尝试连接 MongoDB 集群时发生超时错误。可能原因：网络问题或服务器过载。'
  },
  {
    id: 2,
    timestamp: '2025-08-01 08:15:22',
    level: 'WARN',
    source: '数据清洗',
    message: '检测到异常数据格式: 雷达信号数据',
    details: '在雷达信号数据中发现不符合预期的数据格式。字段 "frequency" 应为数值类型，但接收到字符串类型。'
  },
  {
    id: 3,
    timestamp: '2025-08-01 08:18:45',
    level: 'INFO',
    source: '数据接收',
    message: '成功接收 1,240 条新数据记录',
    details: '从频谱监测站 #24 成功接收 1,240 条数据记录，数据大小: 24.8MB'
  },
  {
    id: 4,
    timestamp: '2025-08-01 08:22:17',
    level: 'ERROR',
    source: 'MongoDB',
    message: '写入操作失败: 主键冲突',
    details: '尝试插入记录时发生主键冲突。冲突ID: 5f8d0a4e3b6a7c001c7a3b1a'
  },
  {
    id: 5,
    timestamp: '2025-08-01 08:25:39',
    level: 'WARN',
    source: '数据标准化',
    message: '单位转换异常: GHz 到 Hz',
    details: '在将频率单位从 GHz 转换为 Hz 时，检测到超出范围的值: 350.0 GHz'
  },
  {
    id: 6,
    timestamp: '2025-08-01 08:30:11',
    level: 'INFO',
    source: '数据处理',
    message: '完成数据清洗批次 #245',
    details: '成功处理 1,200 条记录，耗时 42ms，平均每条记录 0.035ms'
  },
  {
    id: 7,
    timestamp: '2025-08-01 08:35:28',
    level: 'ERROR',
    source: 'MongoDB',
    message: '查询超时: 聚合操作',
    details: '在 MongoDB 上执行聚合操作时超时。查询条件: { type: "radar", frequency: { $gt: 3000 } }'
  },
  {
    id: 8,
    timestamp: '2025-08-01 08:40:52',
    level: 'WARN',
    source: '数据验证',
    message: '数据完整性检查失败: 缺失字段',
    details: '在 12 条记录中检测到缺失字段 "signal_strength"，这些记录将被标记为异常。'
  },
  {
    id: 9,
    timestamp: '2025-08-01 08:45:16',
    level: 'INFO',
    source: '数据输出',
    message: '成功导出处理结果',
    details: '将清洗后的数据导出到数据仓库，总计 1,188 条记录。'
  },
  {
    id: 10,
    timestamp: '2025-08-01 08:50:33',
    level: 'ERROR',
    source: 'MongoDB',
    message: '索引创建失败: 重复键错误',
    details: '在集合 "spectrum_data" 上创建索引失败，原因: 索引已存在。'
  }
])

const filteredLogs = computed(() => {
  let result = logData.value

  // 根据日志级别过滤
  if (logLevel.value !== 'all') {
    const levelMap = {
      'error': 'ERROR',
      'warning': 'WARN',
      'info': 'INFO'
    }
    result = result.filter(log => log.level === levelMap[logLevel.value])
  }

  // 根据搜索查询过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(log =>
        log.timestamp.toLowerCase().includes(query) ||
        log.source.toLowerCase().includes(query) ||
        log.message.toLowerCase().includes(query)
    )
  }

  return result
})

const showLogDetails = (log) => {
  // 在实际应用中，这里会显示日志详情弹窗
  console.log('显示日志详情:', log)
}
</script>

<style scoped>
.log-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5vh 1.5vw;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vh;
}

.panel-header h2 {
  font-size: 1.3rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #9c42ff;
}

.log-controls {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.log-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2vh;
}

.stats-card {
  flex: 1;
  background: rgba(20, 30, 60, 0.6);
  border-radius: 8px;
  padding: 1.5vh 0;
  text-align: center;
  border: 1px solid rgba(93, 102, 224, 0.2);
  transition: all 0.3s ease;
}

.stats-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(93, 102, 224, 0.2);
  border-color: rgba(93, 102, 224, 0.5);
}

.stats-value {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(to bottom, #ffffff, #9c42ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5vh;
}

.stats-label {
  font-size: 0.9rem;
  color: #a0bff0;
}

.log-table {
  flex: 1;
  margin-bottom: 1.5vh;
}

.log-pagination {
  display: flex;
  justify-content: center;
}

:deep(.el-table) {
  background-color: transparent;
  color: #e4f0ff;
}

:deep(.el-table th) {
  background-color: rgba(20, 30, 60, 0.6);
  color: #9c42ff;
}

:deep(.el-table tr) {
  background-color: rgba(16, 22, 46, 0.4);
}

:deep(.el-table__row:hover) {
  background-color: rgba(93, 102, 224, 0.2);
}

:deep(.el-table--border) {
  border: 1px solid rgba(93, 102, 224, 0.3);
}

:deep(.el-table--border::after),
:deep(.el-table--group::after),
:deep(.el-table::before) {
  background-color: rgba(93, 102, 224, 0.3);
}
</style>